<template>
	<div style="margin: auto; width: 80%;text-align: center;">城院生活真美好，每天都是乐滋滋</div>
	<div :style="{backgroundImage:'url('+data.url+')'}" class="box-backimage">

		<div style="width: 75%;margin:auto;height: 300px;">
			<div :style="{backgroundImage:'url('+data.user.userAvator+')'}" class="box-userimage"></div>
			<div style="width: 60%;margin:0 auto;height: 30px;">
				<p style="font-size: 27px;text-align: center;color:#eedeb0;">{{data.user.userName}}</p>
			</div>
			<div style="width: 60%;margin:0 auto;height: 30px;margin-top: 10px;">
				<p style="font-size: 18px;text-align: center;color: #eedeb0;overflow: hidden;">{{data.user.userSignature}}</p>
			</div>
			<button style="float: right;" @click="handleSkin" v-show="data.isBtn">更换封面</button>
		</div>

		<div v-for="item in data.log" :key="item.key">
			<div class="box-log">
				<div style="margin-top: 8px;">
					<p class="title-log" style="color: #16160e;">{{item.logTitle}}</p>
				</div>
				<div class="box-log-content">
					<p style="font-size: 25px;color: #16160e; ">{{item.logContent}}</p>
				</div>
				<div :style="{backgroundImage:'url('+item.logPicture+')'}" class="box-logimage">
				</div>
				<div style="height: 55px; width: 50%;float: right;overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;margin-top: 50px;">
					<p style="font-size: 20px;color: #16160e;">{{item.logLocation}}</p>
					<p style="font-size: 15px;color: #16160e;">{{item.logTime}}</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		reactive,
		onActivated,
		onMounted,
		toRefs,
	} from 'vue'
	import {
		useAppStore
	} from '@/store/modules/app.js'
	export default {
		setup() {
			const storeUser = useAppStore()
			let data = reactive({
				user: {
					userName: '',
					userAvator: '',
					userSignature: '',
					userEmail: ''
				},
				log: [],
				url: '',
				userSkin:{
					userId:'',
					url:''
				},
				isBtn:false
			});

			onActivated(() => {
				if (storeUser.userId === '') {
					uni.showToast({
						title: "未登录",
						icon: 'none',
						duration: 1500
					})
					return;
				}
				data.isBtn=true
				uni.request({
					url: 'http://175.178.249.171:8092/api/log/getAllLog/' + storeUser.userId,
					method: 'GET',
					success: (res) => {
						data.log = res.data.data
						data.url = storeUser.url
						data.user = storeUser.user
					}
				})
			})
			onMounted(() => {
				if (storeUser.userId === '') {
					uni.showToast({
						title: "未登录",
						icon: 'none',
						duration: 1500
					})
					return;
				}
				data.isBtn=true
				uni.request({
					url: 'http://175.178.249.171:8092/api/log/getAllLog/' + storeUser.userId,
					method: 'GET',
					success: (res) => {
						data.log = res.data.data
						data.url = storeUser.url
						data.user = storeUser.user
					}
				})
			})
			
			function handleSkin(){
				uni.showLoading({
					title: '上传中'
				})
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						data.uploadFile = res.tempFilePaths[0]
						uni.uploadFile({
							url: 'http://175.178.249.171:8092/api/file/skin',
							filePath: data.uploadFile,
							name: 'file',
							success: (res) => {
								data.userSkin.userId=storeUser.userId
								data.userSkin.url=JSON.parse(res.data).data
								uni.request({
									url:'http://175.178.249.171:8092/api/user/skin',
									method:'PUT',
									data:data.userSkin,
									success: (res) => {
										data.url=data.userSkin.url
										storeUser.url=data.userSkin.url
										uni.showToast({
											title: "更换封面成功",
											icon: 'none',
											duration: 1500
										})
										uni.reLaunch({
											url:'/pages/home/home'
										})
										uni.hideLoading()
									}
								})
							}
						});
					}
				});
				uni.hideLoading()
			}

			return {
				data,
				handleSkin
			};
		}
	}
</script>

<style>
	.sun-title {
		font-size: 44rpx;
		font-weight: 600;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.sun-logo {
		width: 64rpx;
		height: 64rpx;
	}

	.sun-title-text {
		padding-left: 16rpx;
	}

	.sun-tip {
		margin: 0 20rpx 80rpx;
		color: #969799;
		font-size: 28rpx;
	}

	.sun-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: #f7f8fa;
		padding: 0 40rpx;
		cursor: pointer;
		margin-bottom: 28rpx;
	}

	.sun-item .sun-arrow {
		width: 20rpx;
		height: 20rpx;
		border-top: 1rpx solid #272e2d;
		border-right: 1rpx solid #272e2d;
		transform: rotate(45deg);
	}

	.box-log {
		border: 1px solid #fffbf0;
		background: #fffbf0;
		height: 200px;
		width: 90%;
		margin: 0 auto;
		border-radius: 15px;
		margin-top: 15px;
		opacity: 0.9;
	}

	.box-log-content {
		padding-top: 10px;
		width: 90%;
		margin: auto;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.title-log {
		text-align: center;
		font-size: 35px;
	}

	.box-backimage {
		width: 100%;
		background-repeat: repeat;
		background-size: 100% auto;
		background-position: 0 100%;
		position: absolute;
	}

	.box-logimage {
		height: 100px;
		width: 40%;
		float: left;
		background-repeat: repeat;
		background-size: 100% auto;
		background-position: 0 100%;
		position: absolute;
	}

	.box-userimage {
		width: 60%;
		margin: auto;
		height: 180px;
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: 0 100%;
	}
	
	.box-userimage img{
		width: 100%;
		height: 100%;
	}
</style>
